<template>
  <!-- <el-form-item :label="item.title" :prop="rules?item.field:''">
    <el-input v-model="form[item.field]" :disabled="disabled"></el-input>
  </el-form-item> -->
  <div>
    <div>
      <div class="clearfix border-b padding-b">
        <div class="float-l">{{item.title}}</div>
        <div class="float-r table-add-action color" @click="showAddForm">新增</div>
      </div>
      <div>
        <div v-for="data in tableData" :key="data[item.primary]" class="clearfix padding  margin-t table-row relative font-s">
          <div v-for="set in item.setting" :key="set.field" class="float-l" v-bind:style="{ width: itemSettingLen + '%' }">
            {{data[set.field]}}
          </div>
          <div class="table-action color">
            <span class="padding-r" @click="editItem(data)">编辑</span>
            <span class="padding-r" @click="deleteItem(data)">删除</span>
          </div>
        </div>
        <div :hidden="tableData.length == 0? false : true" class="table-void margin-t"><span>-- 无数据记录 --</span></div>
      </div>
    </div>
    <!-- 新增 -->
    <bf-dialog-form ref="dialogForm" :editForm="item.setting" :editRules="item.rules" :title="item.title" @formSubmit="formSubmit"></bf-dialog-form>
    <!-- 编辑 -->
    <bf-dialog-form ref="dialogFormEdit" :editForm="item.setting" :editRules="item.rules" :title="item.title" @formSubmit="editFormSubmit"></bf-dialog-form>
  </div>
</template>

<script>
export default {
  // name: 'text'
  props: ['item', 'form', 'rules', 'disabled'],
  data() {
    return {
      list: [],
      itemSettingLen: 0,
      tableData: []
    };
  },
  mounted: function() {
    if (this.form.detailList) {
      this.tableData = this.form.detailList;
    }
    this.itemSettingLen = 1 / this.item.setting.length * 100;
  },
  methods: {
    showAddForm() {
      // console.log(this.$refs.dialogForm)
      this.$refs.dialogForm.show();
    },
    formSubmit(form) {
      /**
       * 新增
       */
      const primary = form[this.item.primary];
      const temArr = {};
      this.tableData.forEach(v => {
        temArr[v[this.item.primary]] = true;
      });
      if (temArr[primary]) {
        let primayType;
        this.item.setting.forEach(v => {
          if (v.field === this.item.primary) {
            primayType = v.title;
          }
        });
        this.$message({
          message: primayType + '重复！',
          type: 'error'
        });
      } else {
        this.$refs.dialogForm.hidden();
        this.tableData.unshift(form);
        this.form[this.item.field] = this.tableData;
      }
    },
    editFormSubmit(form) {
      /**
       * 编辑
       */
      const primary = form[this.item.primary];
      const temArr = {};
      this.tableData.forEach(v => {
        temArr[v[this.item.primary]] = true;
      });
      if (temArr[primary]) {
        let primayType;
        this.item.setting.forEach(v => {
          if (v.field === this.item.primary) {
            primayType = v.title;
          }
        });
        this.$message({
          message: primayType + '重复！',
          type: 'error'
        });
        return;
      }

      this.tableData.forEach((v, i) => {
        if (v[this.item.primary] === primary) {
          this.tableData.splice(i, 1, form);
          this.form[this.item.field] = this.tableData;
        }
      });
      this.$refs.dialogFormEdit.hidden();
    },
    deleteItem(item) {
      // console.log(item)
      this.$confirm('删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // this.$emit('editSubmit', this.deleteData, 'delete')
          this.tableData.forEach((v, i) => {
            if (v === item) {
              // console.log(item)
              this.tableData.splice(i, 1);
            }
          });
          this.form[this.item.field] = this.tableData;
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除操作'
          });
        });
    },
    editItem(item) {
      this.$refs.dialogFormEdit.show(item);
    }
  }
};
</script>

<style scoped>
.table-row {
  background: #fdfdfd;
  border: 1px dotted #e9e9e9;
}
.table-row:hover {
  background: #f8f8f8;
}
.table-action {
  position: absolute;
  right: 0;
  font-size: 12px;
  display: none;
  cursor: pointer;
}
.table-row:hover .table-action {
  display: block;
}
.table-add-action {
  cursor: pointer;
}
.table-void {
  text-align: center;
  font-size: 12px;
  color: #aaa;
}
</style>
